<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册界面</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="/shop/static/css/bootstrap.min.css" media="all" />
<link rel="stylesheet" href="/shop/static/iconfont/style.css" media="all" />
<style>
	body{font-family:"微软雅黑"; font-size:14px;}
	.wrap1{position:absolute; top:0; right:0; bottom:0; left:0; margin:auto }/*把整个屏幕真正撑开--而且能自己实现居中*/
	.main_content{background:rgba(255,255,255,0.4); margin-left:auto; margin-right:0; text-align:left; float:none; border-radius:30px;}
	.form-group{position:relative;}
	.login_btn{display:block; background:#3872f6; color:#fff; font-size:15px; width:50%; line-height:40px; border-radius:10px; border:none;float:right;}
	.login_input{width:100%; border:1px solid #3872f6; border-radius:10px; line-height:35px; padding:2px 5px 2px 30px;}
	.login_input_pw{width:60%; border:1px solid #3872f6; border-radius:10px; line-height:35px; padding:2px 5px 2px 30px;}
	
	.icon_font{position:absolute; bottom:15px; left:10px; font-size:18px; color:#3872f6;}
	.font16{font-size:16px;}
	.mg-t20{margin-top:20px;}
	.mg-t30{margin-top:30px;}
	/* 白色 */
    .white{color: #FFFFFF !important;}
    .right{float:right;width:100%}
	@media (min-width:200px){.pd-xs-20{padding:20px;}}
	@media (min-width:768px){.pd-sm-50{padding:50px;}}
	@media (min-width:500px){.pd-sm-50{padding:50px;}}
	#grad {
	  background: -webkit-linear-gradient(#4990c1, #52a3d2, #6186a3); /* Safari 5.1 - 6.0 */
	  background: -o-linear-gradient(#4990c1, #52a3d2, #6186a3); /* Opera 11.1 - 12.0 */
	  background: -moz-linear-gradient(#4990c1, #52a3d2, #6186a3); /* Firefox 3.6 - 15 */
	  background: linear-gradient(#4990c1, #52a3d2, #6186a3); /* 标准的语法 */
	}
	.codeimg{
		position: absolute;
		right: 0%;
		height: 100%;
		width: 30%;
		top: 2%;
	}
	.img{
       	height: 95%;
		width: 95%;
		border-radius:12px;
	}
	.bg{
	   background:url(/shop/static/images//bg.png) no-repeat;
	}
</style>

</head>

<body class="bg">
    
    <div class="container wrap1" style="height:500px;">
            <div class="col-sm-8 col-md-5 center-auto pd-sm-50 pd-xs-20 main_content mg-t30">
                <p class="text-center font16 white"><strong>个人商城后台管理系统</strong></p>
                <form id="userForm">
                    <div class="form-group mg-t20">
                        <i class="icon-user icon_font"></i>
                        <input type="email" class="login_input" name="username" id="username" placeholder="请输入邮箱" />
                    </div>
                    <div class="form-group mg-t20">
                        <i class="icon-lock icon_font"></i>
                        <input type="password" class="login_input" name="password" id="password" placeholder="请输入密码" />
                    </div>
					<div class="form-group mg-t20">
                        <i class="icon-lock icon_font"></i>
                        <input type="password" class="login_input" name="passwordSub" id="passwordSub" placeholder="请再次输入密码" />
                    </div>
					<div class="form-group mg-t20">
                        <i class="icon-custom icon_font"></i>
                        <input  class="login_input_pw" name="code" id="code" placeholder="请证明你不是机器人" />
						<div class="codeimg">
							<a href="javascript:void(0);" onclick="changeImg()" class="aui-child aui-child-img"><img  class="img" src="/shop/user/validateCode" alt="" id="imgObj" /></a>
						</div>
                    </div>
                    
               </form>
               <div class="right">
               		<button style="button" id="nextBtn" class="login_btn">注册</button>
               </div>
               <a href="/shop/user/login" class="aui-ll-link">前往登录</a>
        </div><!--row end-->
    </div><!--container end-->
  <script type="text/javascript" src="/shop/static/js/common/jquery-2.1.0.min.js"></script> 
  <script type="text/javascript" src="/shop/static/js/common/popup.js"></script> 
  <script type="text/javascript">
	$(function(){
		//AJAX提交以及验证表单
		$('#nextBtn').click(function(){
			var username = $('#username').val();
			var passwd = $('#password').val();
			var passwd2 = $('#passwordSub').val();
			var verifyCode = $('#code').val();
			var usernameReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //邮件正则
			if(username == ''){
				showTips('请填写您的邮箱~');
			}else if(!usernameReg.test(username)){
				showTips('您的邮箱格式错咯~');
			}else if(passwd == ''){
				showTips('请填写您的密码~');
			}else if(passwd2 == ''){
				showTips('请再次输入您的密码~');
			}else if(passwd != passwd2 || passwd2 != passwd){
				showTips('两次密码输入不一致呢~');
			}else if(verifyCode == ''){
				showTips('请输入验证码~');
			}else{
				$("#nextBtn").attr('disabled',true);
				$("#nextBtn").html("注册中...");
		        $.ajax({
		            type: 'post',
		            url: "/shop/user/doRegister",
		            data: $('#userForm').serialize(),
		            dataType: 'json',
		            success: function(data){
		                if (data.code == "1"){
		                	showTips(data.msg,2500,1,'/shop/user/login');
		                }else {
		    				$("#nextBtn").attr('disabled',false);
		    				$("#nextBtn").html("注册");
		                	changeImg();
		                	showTips(data.msg);
		                }
		            }
		        });
			}
		});
	});
   // 刷新图片
    function changeImg() {
        var imgSrc = $("#imgObj");
        var src = imgSrc.attr("src");
        imgSrc.attr("src", changeUrl(src));
    }
    //为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳
    function changeUrl(url) {
        var timestamp = (new Date()).valueOf();
        var index = url.indexOf("?",url);
        if (index > 0) { 
			 url = url.substring(0, index);
			}
        if ((url.indexOf("&") >= 0)) {
            url = url + "×tamp=" + timestamp;
        } else {
            url = url + "?timestamp=" + timestamp;
        }
        return url;
    }
	</script>  
 </body>
</html>
